// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: m_multi_text
    width: root_width
    height: item_title.height + item_content.height
    state: state_text

    property string title_text: "value"
//    property string color_text: "white"
    property int text_size: 26
    property int root_width: 400
    property string state_text: ""
//    property string text: "value"
    property string text_0: ""
    property string text_1: ""
    property string address_0: ""
    property string address_1: ""
    property string color_bg: "#000b64"
    property string color_border: "#000000"
    property string color_text: "#ffffff"
//    property int text_size: 33

    signal bt0_click()
    signal bt1_click()

    function hide()
    {
        m_multi_text.state = "hide";
    }

    Item {
        id: item_title
        height: 42
        anchors.top: parent.top
        anchors.topMargin: 0
        width: parent.width

        Rectangle {
            id: rectangle_circle
            x: 31
            y: 5
            width: 40
            height: 40
            color: "#00000000"
            radius: 97
            smooth: true
            anchors.horizontalCenter: rectangle_line.left
            border.color: "#ffffff"
            anchors.bottom: rectangle_line.top
            anchors.bottomMargin: 0
            border.width: 2
        }

        Rectangle {
            id: rectangle_line
            x: 50
            y: 45
            width: parent.width * 0.9
            height: 1
            color: "#ffffff"
            anchors.bottom: parent.bottom
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.right: parent.right
        }

        Text {
            id: text_title
            y: 9
            color: color_text
            text: title_text
            font.pixelSize: text_size
            anchors.verticalCenter: rectangle_circle.verticalCenter
            anchors.leftMargin: 5
            verticalAlignment: Text.AlignVCenter
            anchors.left: rectangle_circle.right

//            State {
//                name: "title_mouse_over"
//                when: mouse_area1.containsMouse

//                PropertyChanges {
//                    target: text_title
//                    color: "orange"
//                }
//            }
        }

        MouseArea {
            id: mouse_area1
            hoverEnabled: true
            anchors.fill: parent

            onClicked:
            {
                m_multi_text.state == "" ? m_multi_text.state = "hide" : m_multi_text.state = ""
            }
        }

    }

    Item {
        id: item_content
        x: 0
        width: parent.width
        height: column1.height
        anchors.top: item_title.bottom
        anchors.topMargin: 0
        anchors.rightMargin: 0
        anchors.right: parent.right
        anchors.leftMargin: 0
        anchors.left: parent.left

        Rectangle {
            id: rectangle_content
            y: 0
            color: "#ffffff"
            opacity: 0.250
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 40
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
//            anchors.verticalCenter: rectangle_circle.verticalCenter
        }

        Column {
            id: column1
            width: parent.width
            spacing: 0
            Item {
                id: item3
                x: 50
                y: 31
                width: 300
                height: 60
                Text {
                    id: text1
                    y: 19
                    color: "#ffffff"
                    text: text_0
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 26
                    anchors.verticalCenterOffset: 0
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 20
                    anchors.left: parent.left
                }

                Mbutton {
                    id: mbutton1
                    x: 96
                    y: 0
                    pro_height: 50
                    anchors.rightMargin: 0
                    anchors.verticalCenter: parent.verticalCenter
                    text_size: 26
                    anchors.right: parent.right
                    textstring: address_0

                    onButtonclick: bt0_click()
                }
            }

            Item {
                id: item4
                x: 50
                y: 111
                width: 300
                height: 60
                Text {
                    id: text2
                    y: 19
                    color: "#ffffff"
                    text: text_1
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 26
                    anchors.verticalCenterOffset: 0
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 20
                    anchors.left: parent.left
                }

                Mbutton {
                    id: mbutton2
                    x: 96
                    y: 0
                    pro_height: 50
                    anchors.rightMargin: 0
                    anchors.verticalCenter: parent.verticalCenter
                    text_size: 26
                    anchors.right: parent.right
                    textstring: address_1

                    onButtonclick: bt1_click()
                }
            }
        }


    }

    states: [
        State {
            name: "hide"

//            PropertyChanges {
//                target: item_content
//                opacity: 1
//            }

            PropertyChanges {
                target: column1
                height: 0
                opacity: 0
            }

            PropertyChanges {
                target: m_multi_text
                width: root_width / 2
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "hide"
            SequentialAnimation {
                //                          id: playbanner
                //                          running: true
                PropertyAnimation { target: column1; property: "opacity"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: column1; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: m_multi_text; property: "width"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "hide"
            to: ""
            SequentialAnimation {
                //                          id: playbanner
                //                          running: true
                PropertyAnimation { target: m_multi_text; property: "width"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: column1; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: column1; property: "opacity"; easing.type: Easing.OutCubic;}
            }
        }
    ]

}
